.euiColorStops:not(.euiColorStops-isDisabled) {
  &:focus {
    outline: 2px solid $euiFocusRingColor;
  }
}

.euiColorStops__addContainer {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: $euiRangeThumbHeight;
  margin-top: $euiRangeThumbHeight * -.5;

  &:hover:not(.euiColorStops__addContainer-isDisabled) {
    cursor: pointer;

    .euiColorStops__addTarget {
      opacity: .7;
    }
  }
}

.euiColorStops__addTarget {
  @include euiCustomControl($type: 'round');
  @include euiRangeThumbStyle;
  position: absolute;
  top: 0;
  height: $euiRangeThumbHeight;
  width: $euiRangeThumbHeight;
  background-color: $euiColorLightestShade;
  pointer-events: none;
  opacity: 0;
  transition: opacity $euiAnimSpeedFast;
}

.euiColorStop {
  width: $euiColorPickerWidth;
}

.euiColorStopPopover.euiPopover {
  position: absolute;
  top: 50%;
  width: $euiRangeThumbWidth;
  height: $euiRangeThumbHeight;
  margin-top: $euiRangeThumbHeight * -.5;
}

.euiColorStopPopover-hasFocus {
  z-index: 1;
}

.euiColorStopPopover__anchor {
  position: absolute;
  width: 100%;
  height: 100%;

  // Background color can potentially have opacity
  // Pseudo element placed below the thumb to prevent the track from showing through 
  &:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    height: $euiRangeThumbHeight;
    width: $euiRangeThumbHeight;
    border-radius: $euiRangeThumbHeight;
    background: $euiColorEmptyShade;
  }
}

.euiColorStopThumb.euiRangeThumb:not(:disabled) {
  // sass-lint:disable-block no-color-literals, indentation
  top: 0;
  margin-top: 0;
  pointer-events: auto;
  cursor: grab;
  border: solid ($euiSizeXS - 1px) $euiColorEmptyShade;
  box-shadow:
    0 0 0 1px $euiColorMediumShade,
    0 2px 2px -1px rgba($euiShadowColor, .2),
    0 1px 5px -2px rgba($euiShadowColor, .2);

  &:active {
    cursor: grabbing;
  }
}

.euiColorStopPopover-isLoadingPanel {
  // sass-lint:disable-block no-important
  visibility: hidden !important; // Overrides a stateful class on EuiPopover -> EuiPanel
}

.euiColorStops.euiColorStops-isDragging:not(.euiColorStops-isDisabled):not(.euiColorStops-isReadOnly) {
  cursor: grabbing;
}

.euiColorStops__highlight {
  color: $euiRangeTrackColor;
}
